<ui:composition
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:q="http://huliqing.name/qfaces"
    xmlns:g="http://huliqing.name/qblog"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    template="/WEB-INF/template/layout_photo.xhtml"
    xmlns:c="http://java.sun.com/jsp/jstl/core">
    <ui:define name="subTabName">
        <c:set var="subTabName" value="folderList" />
    </ui:define>

    <ui:define name="menuTitle">
        <h:graphicImage url="/_res/image/star.png" height="40" styleClass="alignM"/>
        相册
        <g:help helpId="AboutAlbum" />
    </ui:define>

    <ui:define name="menuContent">
        <style type="text/css">
            .col1{width:120px;text-align:center;}
        </style>
        <h:outputLink value="/admin/photo/folderAdd.faces">
            <h:outputText value="添加相册" />
        </h:outputLink>
        <h:form>
            <q:scroller for="folders"
                        listener="#{folderListWe.loadData}"
                        var="folder"
                        displayJump="false" face="1">
                <h:dataTable id="folders"
                             binding="#{folderListWe.uiFolders}"
                             headerClass="header"
                             width="100%"
                             border="0"
                             styleClass="alignC dotted"
                             columnClasses="col1,,,,"
                             rowClasses="row1,row2"
                             cellpadding="3">
                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="操作" />
                            <h:commandLink action="#{folderListWe.delete}" />
                        </f:facet>
                        <h:outputLink value="/admin/photo/photoUpload.faces" styleClass="marginLR">
                            <f:param name="folderId" value="#{folder.folderId}" />
                            <f:param name="returnURL" value="#{app.currentURL}" />
                            <h:graphicImage url="/_res/image/button-add.gif" />
                        </h:outputLink>
                        <h:outputLink value="/admin/photo/folderEdit.faces" styleClass="marginLR">
                            <f:param name="folderId" value="#{folder.folderId}" />
                            <f:param name="returnURL" value="#{app.currentURL}" />
                            <h:graphicImage url="/_res/image/button-edit.gif" />
                        </h:outputLink>
                        <h:commandLink action="#{folderListWe.delete}" onclick="return confirm('您确认删除该相册吗？注意：相册下的所有图片将被一起删除，该操作不可恢复！');" styleClass="marginLR">
                            <h:graphicImage url="/_res/image/button-delete.gif" />
                        </h:commandLink>
                    </h:column>

                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="相册" />
                        </f:facet>
                        <div style="margin:auto;border:0px solid gray;width:185px;height:155px;background:url(/_res/image/album.png) no-repeat;">
                            <div style="border:0;height:21px;"></div>
                            <div style="border:0;height:95px;margin:0 30px 0 39px;text-align:center;overflow:hidden;">
                                <a href="/admin/photo/photoList.faces?folderId=#{folder.folderId}">
                                    <img src="#{folder.cover}" style="max-width:114px;max-height:95px;" alt="" />
                                </a>
                            </div>
                            <div style="border:0;margin:12px 10px 0 12px;text-align:center;overflow:hidden;">
                                <a href="/admin/photo/photoList.faces?folderId=#{folder.folderId}">
                                    #{folder.name}
                                </a>
                            </div>
                        </div>
                    </h:column>

                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="隐私" />
                        </f:facet>
                        <h:outputText value="#{folder.security}" />
                    </h:column>

                    <h:column>
                        <f:facet name="header">
                            <h:outputText value="提取码" />
                        </f:facet>
                        <h:outputText value="#{folder.fetchCode}" />
                    </h:column>
                </h:dataTable>
            </q:scroller>
        </h:form>
    </ui:define>
</ui:composition>